<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Visualizar Mapa</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="script/view.js"></script>

    <%@page import="java.util.List" %>
    <%@page import="sismol.cartography.Linha" %>
    <%@page import="sismol.data.GerenciadorBusca" %>
    <%@page import="sismol.data.GerenciadorFactory" %>
<%
    GerenciadorBusca busca = GerenciadorFactory.getGerenciadorBusca();
%>

<style type="text/css">
    div.selectbar {
        background-color: #6883D4;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        box-shadow: 7px 7px 5px #888;
        -webkit-box-shadow: 7px 7px 5px #888;
        -moz-box-shadow: 7px 7px 5px #888;
        padding: 5px;
        margin-bottom: 5px;
    }
    div.selectbar > p {
        color: white;
        margin: 5px;
    }
    div.instrucoes {
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        margin: 5px;
    }
    div.instrucoes > fieldset {
        padding-top: 3px;
        padding-left: 10px;
        padding-right: 0px;
        padding-bottom: 5px;
        margin: 0;
    }
    div.instrucoes > fieldset > legend {
        cursor: pointer;
    }
    select.linha {
        width: 500px;
        height: 30px;
        border-color: #ccc;
        border-width: 2px;
    }
    input.monitorbutton {
        height: 30px;
        border-radius: 5px;
        webkit-border-radius: 5px;
        -moz-border-radius: 5px;
    }
</style>

</head>
<body class="sismol" onload="MBUSS.init();">
    <jsp:include page="header.jsp" />

    <div class="body">
        <div class="title">Monitorar Linha</div>
        <div class="instrucoes">
            <fieldset>
                <legend onclick="MBUSS.toogleInstructions(this);"><img src="images/collapse.png" alt="Exibir" />&nbsp;&nbsp;Instru&ccedil;&otilde;es</legend>
                <div id="instrucoes">
                    <div>
                        <ul>
                            <li>Selecione a linha que deseja embarcar</li>
                            <li>Aguarde at&eacute; que a linha apare&ccedil;a no mapa</li>
                            <li>Localize o ponto mais pr&oacute;ximo &agrave; sua localiza&ccedil;&atilde;o e clique sobre ele</li>
                            <li>A janela aberta mostra a estimativa de tempo at&eacute; o &ocirc;nibus mais pr&oacute;ximo chegar</li>
                        </ul>
                    </div>
                </div>
            </fieldset>
        </div>
        <div class="selectbar">
            <p>Linha:
                <select name="linhaId" id="linhaId" class="linha">
                    <option value=""></option>
                    <% List<Linha> linhas = (List<Linha>) busca.listarLinhas();
                        for(Linha linha: linhas){
                    %>
                        <option value="<%=linha.getId()%>"><%=linha.getNome()%></option>
                    <%
                        }
                    %>
                </select>
                <input class="monitorbutton" type="button" value="Monitorar Linha" onclick="MBUSS.view();" />
            </p>
            <div id="map_canvas" style="width: 100%; height: 67%;"><!-- nada --></div>
        </div>
    </div>
    <%--<jsp:include page="footer.jsp" />--%>
</body>
</html>